<template>
  <div>
    <div class="center-w">
      <div class="head">
        <div class="head-w">
          <div class="title">报名管理</div>
          <el-input
            prefix-icon="el-icon-search"
            style="width: 200px;"
            size="small"
            v-model="pageparm.Company"
            placeholder="公司名称"
            clearable
            @input="getList()"
          ></el-input>
          <el-input
            prefix-icon="el-icon-search"
            style="width: 200px;margin: 0 10px;"
            size="small"
            v-model="pageparm.SearchKey"
            placeholder="活动名称"
            clearable
            @input="getList()"
          ></el-input>
          <el-date-picker
            v-model="pageparm.SignDate"
            type="date"
            size="small"
            placeholder="报名时间"
            @change="getList()"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <el-popconfirm
          confirm-button-text="导出"
          cancel-button-text="取消"
          @confirm="exportExcel()"
          icon="el-icon-info"
          icon-color="red"
          :title="
            selectdata.length > 0
              ? '是否导出当前勾选数据?'
              : '是否要导出全部数据?'
          "
        >
          <el-button
            size="mini"
            type="danger"
            slot="reference"
            icon="el-icon-upload2"
            >导出</el-button
          >
          <!-- <el-button slot="reference">删除</el-button> -->
        </el-popconfirm>
      </div>
      <div style="overflow-y: scroll;height: 100%;">
        <el-table
          :header-cell-style="{
            background: '#f3f6fa',
            color: '#555'
          }"
          size="mini"
          row-key="id"
          border
          @selection-change="selectChange"
          height="100%"
          :data="tableData"
        >
          <el-table-column
            :reserve-selection="true"
            type="selection"
            align="center"
            width="50"
          ></el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            align="center"
            prop="participantNo"
            label="报名编码"
            width="200"
          ></el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            align="center"
            prop="activityNo"
            label="活动编码"
            width="200"
          ></el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            align="center"
            prop="activityName"
            label="报名活动名"
          ></el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            align="right"
            prop="money"
            width="100"
            label="支付情况"
          >
            <template slot-scope="scope">
              <el-link style="font-size: 12px;" type="danger"
                >{{
                  scope.row.money == 0 ? "免费活动" : scope.row.money + "元"
                }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            align="center"
            prop="fullName"
            label="姓名"
          ></el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            align="center"
            prop="mobile"
            label="手机号码"
          ></el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            align="center"
            prop="company"
            label="公司名"
          ></el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            align="center"
            prop="note"
            label="备注"
          ></el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="createdAt"
            label="报名时间"
          >
            <template slot-scope="scope">
              {{ scope.row.createdAt }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <Pagination
        v-bind:child-msg="pageparm"
        @callFather="callFather"
      ></Pagination>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";

import exportDataInExcel from "../../utils/exportExcel";

import { getSignPageList } from "@/api/signActivity";

export default {
  components: { Pagination },
  data() {
    return {
      // 表格数据
      tableData: [],
      selectdata: [],
      //分页
      pageparm: {
        SearchKey: "",
        StartDate: null,
        CompanyName: "",
        pageIndex: 1,
        PageSize: 50,
        total: 1
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取列表
    async getList() {
      const res = await getSignPageList(this.pageparm);
      if (res.code == 200 && res.data) {
        let { items, totalCount } = res.data;
        this.tableData = items;
        this.pageparm.total = totalCount;
      } else {
        this.tableData = [];
      }
    },

    // 选中的数据
    selectChange(row) {
      this.selectdata = row;
    },

    //导出
    async exportExcel() {
      if (this.tableData.length == 0) {
        return this.$message.warning("没有可导出的报名数据!");
      }
      //需要导出字段的名字
      let arrName = [
        "报名编码",
        "活动编码",
        "活动名称",
        "金额",
        "姓名",
        "手机号码",
        "公司名",
        "备注",
        "报名时间"
      ];
      //需要导出字段的名字表格的对应的列宽
      let columnWidth = [20, 20, 20, 20, 20, 20, 20, 20, 40];

      //表格的名字
      const name = "报名列表";

      let flag = this.selectdata.length > 0 ? true : false;
      let arr = [];
      if (!flag) {
        //  默认全部导出
        this.pageparm.size = 999;
        let res = await getSignPageList(this.pageparm);
        arr = res.data ? res.data.items : [];
      }
      let list = [];
      let currentList = flag ? this.selectdata : arr;
      //找出对应需要的字段传到公共导出方法里面
      currentList.forEach(el => {
        list.push({
          participantNo: el.participantNo,
          activityNo: el.activityNo,
          activityName: el.activityName,
          money: el.money,
          fullName: el.fullName,
          mobile: el.mobile,
          company: el.company,
          note: el.note,
          createdAt: el.createdAt
        });
      });

      //导出传入公共方法
      exportDataInExcel(list, name, columnWidth, arrName);
    },

    // 分页插件事件
    callFather(parm) {
      this.pageparm.pageIndex = parm.pageIndex;
      this.pageparm.PageSize = parm.size;
      this.getList();
    }
  }
};
</script>

<style lang="less" scoped>
.center-w {
  display: flex;
  /* align-items: center; */
  flex-direction: column;
  background-color: #fff;
  height: 89vh;
  padding: 10px;
  border: 1px solid #ccc;
  //margin: 20px;
}

.title {
  color: rgba(16, 16, 16, 1);
  font-size: 20px;
  margin-bottom: 10px;
  margin-right: 20px;
}

.active {
  color: rgb(124, 134, 244) !important;
}

.head {
  display: flex;
  margin-bottom: 10px;
  padding-bottom: 10px;
  align-items: center;
  border-bottom: 2px solid #eee;
  justify-content: space-between;
  .head-w {
    display: flex;
  }
}
</style>
